<template>
    <div class="newPro">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>工厂新品</span>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick" v-if="imgList">
                <el-tab-pane :label="list" :name="list" v-for="(list,i) in nameList" :key="i">
                    <div class="el-upload-list--picture-card">
                        <template v-for="(item,n) in imgList">
                            <div class="el-upload-list__item" :key="n" v-if="list == item.name">
                                <img
                                    class="el-upload-list__item-thumbnail"
                                    :src="item.url" alt=""
                                >
                                <span class="el-upload-list__item-actions">
                                    <span
                                        class="el-upload-list__item-preview"
                                        @click="handlePictureCardPreview(item)"
                                        >
                                        <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span
                                        class="el-upload-list__item-delete"
                                        @click="handleRemove(item)"
                                        >
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </div>
                </el-tab-pane>
            </el-tabs>
            
            <el-button type="primary" @click="addImg">添加图片</el-button>
        </el-card>
        <el-dialog
            title="添加图片"
            :visible.sync="dialogVisibleUpload"
            width="60%">
            <span>
                <el-upload
                    class="upload-demo"
                    ref="upload"
                    :action="actionUrl"
                    :multiple="true"
                    :data="dataUpload"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :headers="headers"
                    list-type="picture-card"
                    :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
                    <div class="upload-con w_400 mt_20">
                        <el-input class="dis_i_b w_200" v-model="input" placeholder="请输入名称"></el-input>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                    </div>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleUpload = false">取 消</el-button>
            </span>
        </el-dialog>
        <!-- 放大图片 -->
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dialogVisibleUpload:false,
                input:'',
                fileList: [],
                imgList:[],
                actionUrl:'/api/file/upload',
                listUrl:'fileList',
                deleteUrl:'fileDelete',

                headers:{},
                dialogImageUrl: '',
                dialogVisible: false,

                nameList:[],
                activeName:'',
            };
        },
        computed: {
            dataUpload() {

                return {
                    type:15,
                    userId: 0,
                    name: this.input,
                }
            }
        },
        methods: {
            addImg(){
                this.fileList=[];
                this.input = '';
                this.dialogVisibleUpload = true
            },
            async submitUpload() {
                if(this.input == ''){
                    this.$message.error('请输入新品名称！');
                    return false
                }
                await this.$refs.upload.submit();
                setTimeout(() => {
                    this.getFileList();
                }, 2000);
                this.dialogVisibleUpload= false;
            },
            // 删除图片
            handleRemove(file, fileList) {
                console.log(file, fileList);
                let id = file.id;
                if(id == undefined){
                    id = file.response.fileRecord.id;
                }
                let param = {
                    id: id
                }
                this.$api.fileDelete({param},()=>{
                    this.$message.success('删除成功！')
                    this.getFileList();
                })
            },
            //获取图片列表
            getFileList() {
                let param = this.dataUpload;
                delete param.name;
                this.$api.fileList({param},res=>{
                    let list = res.list;
                    let setList=new Set();
                    list.map(e=>{
                        setList.add(e.name);
                        e.url = e.filePath;
                        // e.name = e.fileName;
                        return e;
                    });
                    this.imgList = list;
                    let nameList = Array.from(setList);
                    this.$set(this, 'nameList', nameList);
                    this.activeName = this.nameList[0]
                    console.log('nameList', this.nameList);
                })
            },
            // 放大图片
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleClick(tab, event) {
                console.log(tab, event);
            }
        },
        mounted () {
            this.$nextTick().then(e=>{
                if(process.env.NODE_ENV){
                    let baseUrl = process.env.VUE_APP_baseUrl;
                    this.actionUrl = baseUrl + this.actionUrl;
                }
            });
            this.headers = {Authorization:localStorage.Authorization};
            this.getFileList();
        },
    }
</script>

<style lang="less" scoped>
    .newPro{
        .upload-con{
            // display: inline-block;
        }
    }
</style>